<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader :list="list" @add="addFn" @reserv="reservFn"></TodoHeader>
    <!-- 传数据给子组件  删除 自定义事件 --> 
    <TodoMain :list="showList" @del="delFn" @changeFn="changeFn"></TodoMain>
    <TodoFooter :list="list" @changeClick="changeClick" @clear="clearFn"></TodoFooter>
    <!-- 自定义属性事件，点击其切换对应的数据 -->
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  //新的数据界面
  computed:{
 showList(){
 if (this.type === 'yes') {
        return this.list.filter((item) => item.isDone)
      } else if (this.type === 'no') {
        return this.list.filter((item) => !item.isDone)
      } else {
        return this.list
      }
}
  },
  data() {
    return {
      // list: [
      //   { id: 100, name: "吃饭", isDone: true },
      //   { id: 101, name: "睡觉", isDone: false },
      //   { id: 102, name: "打豆豆", isDone: true },
      // ],
      //读取的时候如果本地还没有存储数据，他会默认null，但是null不能作为初始值，所有没有的话可以给一个空数组
     list:JSON.parse(localStorage.getItem('list')) || [],

      type:'all' //all全部 no 未完成 yes已完成 
    };
  },
  methods:{
    //接受子穿进来的参数
    delFn(id){
    //  console.log(id);
     //删除用filter 保留true 满足item.id!==id留下
     this.list=this.list.filter(item=>item.id!==id)
    },
      //接受子传过来的的id 改变状态的函数 修改每个复选框的状态
    changeFn(id){
    // console.log(id);
    //根据id查找数组中对应项，进行更新
    //find查找返回满足的条件  传过来的id和和遍历的id相等 满足条件 就返回然后给isDone取反就可以改变状态了
     const res = this.list.find((item) => item.id === id)
      res.isDone = !res.isDone
    
    },
    //添加实现，接收子传过来的参数name,给数组添加一个对象的数据，一一对应的
    addFn(text){
    //  console.log(name);
     this.list.push({
      //id先判断一下有没有数据 有的话就在最后一个id+1 meiyou就从100开始
      id:this.list.length? this.list.at(-1).id+1 :100,
      name:text,
      isDone:false
      //一开始是要false 待完成的状态
     })
    },
    //接受传过来的形参
    reservFn(val){
      //让试图修改的值给到每一项的isDone
      this.list.forEach(item=>item.isDone=val)
    },
    changeClick(type){
      //接受子传过来的参数 让type=当前的
        // console.log(type);

        this.type=type
    },
    //清除已完成的
    clearFn(){
    this.list = this.list.filter((item) => !item.isDone)
    }
  },
  //本地存储
//监听list的变化 list数组包对象，复杂对象需要深度监听
  watch:{
    list:{
      deep:true,
      //两个参数 新 旧 
      handler(newList){
        //存
        localStorage.setItem('list',JSON.stringify(newList))
      }
    }
  }
};
</script>